<a>のdownload属性は同一オリジンじゃないとダウンロード出来ない
#HTML #WebブラウザのJavaScript
https://gyazo.com/3f34455093d63a830684192acb0b3df8
引用元: <a>: アンカー要素 - HTML: HyperText Markup Language | MDN
詳細
同一オリジンでなければ、
download属性を指定しても、ファイルとしてダウンロードされずにブラウザ上で表示されてしまう。
代替案
ブラウザにURLの内容をダウンロードさせる<a download>を使わない代替案。
FileSaver.jsを使う
FileSaverに依存せずにここらへんを参考にすれば大体実装できるはず。
メリット
Blobに対応すれば動作する
デメリット
XMLHttpRequestでBlobとしてレスポンスを受け取るため大きいファイルのときにストリーミングしながらダウンロード出来ないはず。
StreamSaver.jsを使う
メリット
大きいファイルでもストリーミングしながらダウンロード出来る。
デメリット
iOS系のブラウザで対応出来ないなど、対応出来ない環境が多くなりそう。
仕組みなどの詳細: ReadableStreamをストリーミングしながらダウンロードできるStreamSaver.jsの仕組みを読み解きたい
Service Workerとか使ってるし、Safariが許可していないService Workerの使い方も使っている。
Content-Disposition: attachmentヘッダの追加
Webサーバーを変更できるなら、HTTPヘッダにContent-Disposition: attachmentを追加すればダウンロードされるはず。
「ファイルのストリーミング強制保存をクロスオリジンでも実現させるService Workerの裏技ぽい使い方」を使う。